/*
 * 新增出售设备
 * @Author: LuoQianJun
 * @Date: 2018-03-31 14:52:07
 * @Last Modified by: ljb
 * @Last Modified time: 2018-08-10 16:55:50
 */
<style lang="less" rel="stylesheet/less" type="text/less">
    .v-admin-sell-component {
        .ivu-form-item-content {
            img {
                width: 150px;
            }
        }
        .ivu-input[disabled] {
            color: #495060;
		}
		.ivu-uuid {
			width: 188px;
		}
    }

</style>
<template>
	<div class="v-admin-sell-component">
		<Form
			ref="formValidate"
			:model="formValidate"
			:rules="ruleValidate"
			:label-width="labelWidth(115,150)"
			name="sell-form">

			<Form-item
				:label="$t('equipment.device_name')">
				<i-input
					v-model="device_name"
					type="text"
					name="sell-device_name"
					disabled/>
			</Form-item>

			<Form-item
				:label="$t('equipment.operator')"
				prop="operator">
				<i-input
					v-model="formValidate.operator"
					:placeholder="$t('equipment.please_enter_name')"
					name="sell-operator"
					type="text"/>
			</Form-item>

			<Form-item
				:label="$t('equipment.type')"
				prop="skin_detector_ids">
				<Select
					v-model="formValidate.skin_detector_ids"
					name="sell-skin_detector_ids"
					clearable
					filterable
					transfer
					multiple>
					<Option
						v-for="( value , key ) in skinDetectors"
						:value="key + ''"
						:key="key">{{ value }}</Option>
				</Select>
			</Form-item>

			<Form-item
				:label="$t('equipment.customer_id')"
				prop="customer_id">
				<Select
					v-model="formValidate.customer_id"
					:placeholder="$t('equipment.please_select_customer')"
					name="sell-customer_id"
					clearable
					filterable
					transfer>
					<Option
						v-for="( value , key ) in customers"
						:value="key + ''"
						:key="key">{{ value }}</Option>
				</Select>
			</Form-item>

			<Form-item
				:label="$t('equipment.num')"
				prop="num">
				<InputNumber
					:min="1"
					:max="getMaxStock"
					v-model="formValidate.num"
					:placeholder="$t('equipment.please_enter_num')"
					name="sell-num"
					@on-change="changeNum"/>
			</Form-item>

			<Form-item
				v-for="(item, key) in formValidate.items"
				:key="key"
				:label="$t('equipment.account_uuid') + (key+1)"
				:prop="'items.' + key + '.value'"
				:rules="{required: true, message: $t('validate.required', { field: $t('equipment.account_uuid') }), trigger: 'blur,change'}">
				<i-input
					v-model="item.value"
					:placeholder="$t('equipment.please_enter_account_uuid')"
					name="sell-account_uuid"
					type="text"
					class="ivu-uuid"/>
			</Form-item>

			<Form-item
				:label="$t('equipment.sold_at')"
				prop="selled_at">
				<DatePicker
					v-model="formValidate.selled_at"
					:placeholder="$t('equipment.sold_at')"
					name="sell-selled_at"
					type="date"
					@on-change="changeDate"/>
			</Form-item>

			<Form-item>
				<Button
					type="primary"
					@click="handleSubmit('formValidate')">
					{{ $t('common.submit') }}
				</Button>
			</Form-item>

		</Form>
	</div>
</template>
<script>

import labelWidthMixin from 'src/views/mixins/labelWidthMixin';

export default {

	name: 'SellCreate',
	mixins: [labelWidthMixin],
	props: {
		customers: {
			type: Object,
			default() {
				return {};
			},
		},
		purchaseDevice: {
			type: Object,
			default() {
				return {};
			},
		},
		showModal: {
			type: Boolean,
			default() {
				return false;
			},
		},
		skinDetectors: {
			type: Object,
			default() {
				return {};
			},
		},
	},

	data() {
		return {
			formValidate: {
				customer_id: '', // 商家ID

				operator: '', // 出货人

				purchase_device_id: '', // 肤质检测仪型号

				num: 1, // 卖出数量

				uuid: [], // 设备编号

				selled_at: '', // 卖出时间

				skin_detector_ids: [], // 肤质检测仪型号

				items: [ // 账号编码数量
					{
						value: '',
					},
				],
			},

			device_name: '', // 设备名称

			real_date: '', // 时间

			num_data: 1, // 账号编码初始数量

			stock: 0, // 数字输入框最大值

			ruleValidate: { // 表单验证规则
				skin_detector_ids: [
					{
						// required: true,
						type: 'array',
						message: this.$t('validate.required', { field: this.$t('equipment.type') }),
						trigger: 'blur,change',
					},
				],
				customer_id: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.customer_id') }),
						trigger: 'blur,change',
					},
				],
				num: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('equipment.num') }),
						trigger: 'blur,change',
					},
				],
				uuid: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.uuid') }),
						trigger: 'blur,change',
					},
				],
				operator: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.operator') }),
						trigger: 'blur,change',
					},
				],
				selled_at: [
					{
						required: true,
						type: 'date',
						message: this.$t('validate.required', { field: this.$t('equipment.sold_at') }),
						trigger: 'blur,change',
					},
				],

			},

		};
	},
	computed: {
		getMaxStock() {
			return this.stock;
		},
	},

	watch: {
		purchaseDevice() {
			if (this.purchaseDevice) {
				this.formValidate.purchase_device_id = this.purchaseDevice.id;

				this.stock = this.purchaseDevice.stock;

				this.device_name = this.purchaseDevice.device.device_name;
			}
		},

		showModal() {
			if (!this.showModal) {
				this.handleReset('formValidate');

				this.formValidate.items.splice(1, this.num_data);

				this.num_data = 1;
			}
		},


	},

	methods: {
		/**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs[name].resetFields();
		},

		/**
         * 时间选择器改变的回调
         * @param  {string} date {格式化后的时间}
         * @return {undefined}
         */
		changeDate(date) {
			this.real_date = date;
		},

		/**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.handleData();
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 手动拼接表单数据
         * @return {undefined}
         */
		handleData() {
			const new_object = {
				customer_id: this.formValidate.customer_id,

				operator: this.formValidate.operator,

				purchase_device_id: this.formValidate.purchase_device_id,

				num: this.formValidate.num,

				uuids: [],

				sold_at: this.real_date,

				skin_detector_ids: this.formValidate.skin_detector_ids,
			};

			this.formValidate.items.forEach((item) => {
				new_object.uuids.push(item.value);
			});

			const form_data = new FormData();

			Object.keys(new_object).forEach((key) => {
				switch (key) {
				case 'skin_detector_ids':
					new_object[key].forEach((tag, index) => {
						form_data.append(`${key}[${index}]`, tag);
					});

					break;
				case 'uuids':
					new_object[key].forEach((tag, index) => {
						form_data.append(`${key}[${index}]`, tag);
					});

					break;
				default:
					form_data.append(key, new_object[key]);

					break;
				}
			});

			this.$emit('post', form_data);
		},

		/**
		 *增加相应的设备编号
		 * @param {Number} data {input当前值}
         * @return {undefined}
         */
		changeNum(data) {
			if (this.num_data < data) {
				for (let i = 0; i < data - this.num_data; i += 1) {
					this.formValidate.items.push({
						value: '',
					});
				}
				this.num_data = data;
			} else {
				for (let i = 0; i < this.num_data - data; i += 1) {
					this.formValidate.items.pop();
				}
				this.num_data = data;
			}
		},
	},
};
</script>
